<template>
  <div class="table-container">
    <el-table
        size='small'
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
        align='center'
        prop="recordDate"
        label="工单编号">
        </el-table-column>
        <el-table-column
        prop="dayNum"
        align='center'
        label="类型">
        </el-table-column>
        <el-table-column
        align='center'
        width="180"
        prop="planName"
        label="工单详情">
        </el-table-column>
        <el-table-column
        align='center'
        prop="objectName"
        label="创建时间">
        </el-table-column>
        <el-table-column
        align='center'
        prop="headName"
        label="状态">
        </el-table-column>
        <el-table-column
        align='center'
        prop="planTime"
        label="完成时间">
        </el-table-column>
        <el-table-column
        align='center'
        prop="trolTime"
        label="当前处理人">
        </el-table-column>
        <el-table-column label="操作" width="180" align='center'>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">查看</el-button>
          <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
    <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
    </div>
    <el-dialog width="70%" custom-class="dialogs" title="巡检详情" :visible.sync="dialogTableVisible">
      <div class="patrolDetail">
        <span>巡检人员: {{patrolDetail.objectName}}</span>
        <span>关联空间: {{patrolDetail.headName}}</span>
        <span>巡检时间: {{patrolDetail.planTime}}</span>
        <span>用时: {{patrolDetail.costTime}}</span>
        <span>负责人: {{patrolDetail.headName}}</span>
        <span>日期: {{patrolDetail.recordDate}}</span>
        <span>状态: {{patrolDetail.status}}</span>
      </div>
      <el-table  :data="gridData" height="260" style="width: 100%" stripe>
        <el-table-column
        align='center'
        prop="dayNum"
        label="序号">
        </el-table-column>
        <el-table-column
        align='center'
        prop="objectName"
        label="设备名称">
        </el-table-column>
        <el-table-column
        align='center'
        prop="headName"
        label="设备类别">
        </el-table-column>
        <el-table-column
        align='center'
        prop="planTime"
        label="设备系统">
        </el-table-column>
        <el-table-column
        align='center'
        prop="trolTime"
        label="巡检说明">
        </el-table-column>
        <el-table-column
        align='center'
        prop="costTime"
        label="巡检状态">
        </el-table-column>
        <el-table-column
        align='center'
        prop="status"
        label="备注">
        </el-table-column>
        <el-table-column label="照片" align='center'>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handlePic(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
export default {
    props: {
      tableData: {
        type: Array,
        default: []
      }
    },
    components: {
    },
    data() {
      return {
        currentPage: 4,
        gridData:  [{
          recordDate: '2016-05-02',
          planName: '王小虎第一次巡检',
          dayNum: '2',
          objectName: '王小虎',
          headName: '王小虎',
          planTime: '2:00-3:00',
          trolTime: '2:00-3:00',
          costTime: '2h',
          status: '已完成'
        }],
        dialogTableVisible: false,
        patrolDetail: {}
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleEdit(index, item) {
        this.dialogTableVisible = true
        this.patrolDetail = item

      }
    }
}
</script>
<style lang="less" scoped>
/deep/ .dialogs .el-dialog__body {
  padding: 10px 20px 30px 20px;
}
/deep/ .dialogs .el-dialog__body .patrolDetail {
     width: 100%;
     padding: 0 0 10px 0;
     display: flex;
     flex-flow: row wrap;
     align-content: flex-start;
     
     span {
       box-sizing: border-box;
       flex: 0 0 25%;
       margin-bottom: 5px;
     }
   }
 .title-container {
   width: 100%;
   
 }
</style>